<template>
  <div ref="dom" class="charts chart-pie" style="width:100%;height:100%"></div>
</template>
<script>
import echarts from 'echarts'
import tdTheme from './theme.json'
import {off, on} from '@/libs/tools'

echarts.registerTheme('tdTheme', tdTheme)
export default {
  name: 'ChartPie',
  props: {
    value: Object,
    colorA: Array
  },
  data() {
    return {
      dom: null
    }
  },
  methods: {
    resize() {
      this.dom.resize()
    }
  },
  watch: {
    // 深度监听，可监听到对象、数组的变化
    value: {
      handler(val, oldVal) {
        console.log(val, oldVal)
        let xAxisData = Object.keys(val)
        let seriesData = Object.values(val)
        let option = {
          tooltip: {
            trigger: 'item',
            // formatter: '{b} : {c} ({d}%)'
            formatter: '{b} : {c} '
          },
          xAxis: {
            type: 'category',
            data: xAxisData,
            splitLine: {
              show: false
            }
          },
          yAxis: {
            type: 'value',
            splitLine: {
              show: false
            }
          },
          grid: {
            top: 20,
            bottom: 40,
            left: 40,
            right: 20
          },
          series: [{
            data: seriesData,
            type: 'line',
            lineStyle: {
              normal: {
                color: 'rgba(1,157,223, 1)',
                shadowColor: 'rgba(0, 0, 0, .2)',
                shadowBlur: 0,
                shadowOffsetY: 2,
                shadowOffsetX: 2
              }
            },
            label: {
              show: false,
              position: 'top',
              textStyle: {
                color: 'rgba(1,157,223, 1)'
              }
            },
            itemStyle: {
              color: 'rgba(1,157,223, 1)',
              borderColor: '#fff',
              borderWidth: 3,
              shadowColor: 'rgba(0, 0, 0, .3)',
              shadowBlur: 0,
              shadowOffsetY: 2,
              shadowOffsetX: 2
            },
            tooltip: {
              show: true
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(1,157,223,0.3)'
                }, {
                  offset: 1,
                  color: 'rgba(1,157,223,0)'
                }], false),
                shadowColor: 'rgba(1,157,223, 0.9)',
                shadowBlur: 20
              }
            }
          }]
        }

        if (this.colorA && this.colorA.length) {
          option.color = this.colorA
        }
        this.dom = echarts.init(this.$refs.dom, 'tdTheme')
        this.dom.setOption(option)
        on(window, 'resize', this.resize)
      },
      deep: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      // let _this = this;
      let xAxisData = Object.keys(this.value)
      let seriesData = Object.values(this.value)
      let option = {
        tooltip: {
          trigger: 'item',
          // formatter: '{b} : {c} ({d}%)'
          formatter: '{b} : {c}'
        },
        xAxis: {
          type: 'category',
          data: xAxisData,
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: false
          }
        },
        grid: {
          top: 20,
          bottom: 40,
          left: 40,
          right: 20
        },
        series: [{
          data: seriesData,
          type: 'line',
          lineStyle: {
            normal: {
              color: 'rgba(1,157,223, 1)',
              shadowColor: 'rgba(0, 0, 0, .2)',
              shadowBlur: 0,
              shadowOffsetY: 2,
              shadowOffsetX: 2
            }
          },
          label: {
            show: false,
            position: 'top',
            textStyle: {
              color: 'rgba(1,157,223, 1)'
            }
          },
          itemStyle: {
            color: 'rgba(1,157,223, 1)',
            borderColor: '#fff',
            borderWidth: 3,
            shadowColor: 'rgba(0, 0, 0, .3)',
            shadowBlur: 0,
            shadowOffsetY: 2,
            shadowOffsetX: 2
          },
          tooltip: {
            show: true
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(1,157,223,0.3)'
              }, {
                offset: 1,
                color: 'rgba(1,157,223,0)'
              }], false),
              shadowColor: 'rgba(1,157,223, 0.9)',
              shadowBlur: 20
            }
          }
        }]
      }

      if (this.colorA && this.colorA.length) {
        option.color = this.colorA
      }
      this.dom = echarts.init(this.$refs.dom, 'tdTheme')
      this.dom.setOption(option)
      on(window, 'resize', this.resize)
    })
  },
  beforeDestroy() {
    off(window, 'resize', this.resize)
  }
}
</script>
